<template>
  <div>
  <a-row>
    <h1 class="title cartoonFont">推荐艺人</h1>
  </a-row>
  <a-row justify="space-between">
    <a-col v-for="item in FilterGetStratData" :span="4" :key="item.id" class="cartoontext">
        <div class="newSongCol">
            <img :src="item.picUrl" alt="">
            <p>{{item.name}}</p>
        </div>
    </a-col>
  </a-row>
  </div>
  
</template>


<script lang="ts">
import { defineComponent, onMounted, ref } from "@vue/runtime-core";
import { getStartStore } from "../../store";


  export default defineComponent({
     name:"app",
     setup(){
      const getStratDataSrore = getStartStore();
      const getStratData = ref();
      const FilterGetStratData = ref()

      onMounted(async ()=>{
        getStratData.value = await getStratDataSrore.fetch('artists');
        FilterGetStratData.value = (getStratData.value.data.artists).filter((item:any,index:number)=>{
         return index<6   
        })
        // console.log('============>', FilterGetStratData.value);
      })
      return{
        getStratData,
        FilterGetStratData
      }
     }
  })
</script>

<style lang="less" scoped>
.newSongCol{
  text-align: center;
}
.newSongCol img{
  border: 3px solid black;
  border-radius: 50%;
  width: 220px;
  padding: 3px;
  height: 220px;
  object-fit:cover;
}
.newSongCol img:hover{
   cursor: pointer;
   box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
  
}
.newSongCol p:hover{
   cursor: pointer;  
}
.title{
  margin-left:1rem;
  font-size: 28px;
}
</style>
